import { Chat } from "@/types/Chat";
import { useState } from "react";
import { AiOutlineEdit } from "react-icons/ai";
import { MdCheck, MdClose, MdDeleteOutline } from "react-icons/md";
import { PiChatBold, PiTrashBold } from "react-icons/pi";
export default function ChatList() {
  const [chatList, setChatList] = useState<Chat[]>([
    {
      id: "1",
      title: "react入门实战教程",
      updateTime: Date.now(),
    },
    {
      id: "2",
      title: "如何使用Next.js创建React项目",
      updateTime: Date.now() + 1,
    },
    {
      id: "3",
      title: "知行小课",
      updateTime: Date.now() + 2,
    },
  ]);
  // 定义状态用来保存当前选择的对话
  const [selectChat, setSelectChat] = useState<Chat>();
  return (
    <div className="felx-1 mt-2 flex flex-col">
      <ul>
        {chatList.map((item) => {
          const selected = selectChat?.id === item.id;
          return (
            <li
              key={item.id}
              className={`group flex items-center p-3 space-x-3 cursor-pointer rounded-md hover:bg-gray-800 ${
                selected ? "bg-gray-800" : ""
              }`}
              onClick={() => {
                setSelectChat(item);
              }}
            >
              <div>
                <PiChatBold />
              </div>
              <div className="relative flex-1 whitespace-nowrap overflow-hidden">
                {item.title}
                <span
                  className={`group-hover:from-gray-800 absolute right-0  inset-y-0 w-8  bg-gradient-to-l ${
                    selected ? "from-gray-800" : "from-gray-900"
                  }`}
                ></span>
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
